<template>
  <div class="backgroundWhite height100">
    <navs :title="detail.name"></navs>
    <img class="bgimg" v-default-img :src="$oss + detail.cover" alt="" />
    <div class="backgroundWhite positionRe main ts p16">
      <div class="colorGrey ft32 fb">{{ detail.name }}</div>
      <div class="u-f u-f-jsb u-f-ac mt12">
        <div class="u-f u-f-ac">
          <van-tag color="#F3F7FD" text-color="#2D65AC" size="large">{{
            detail.type_display_name
          }}</van-tag
          ><van-tag
            class="ml4"
            v-if="detail.is_free"
            color="#FFEBEB"
            text-color="#980000"
            size="large"
            >免费</van-tag
          >
        </div>

        <span class="ft28 color66">联系人：{{ detail.contact_phone }}</span>
      </div>
      <div class="u-f u-f-ac mt12">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-time"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28">{{ detail.open_date }} </label>
      </div>
      <div class="u-f u-f-ac mt16">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-wode1"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28">{{
          `${detail.team_name}--${detail.team_number}`
        }}</label>
      </div>
      <div class="u-f u-f-ac mt12 mb32">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-address"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28 ellipsis-1">{{
          detail.address
        }}</label>
      </div>
      <div class="p20 bottom_fixed">
        <van-button
          class="colorPrimary"
          round
          block
          color="#F3F7FD"
          text-color="#2D65AC"
          @click="cancelApply"
        >
          取消预约
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRoute } from 'vue-router'
import { weekDay } from '@/utils/model'

const route = useRoute()
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
let detail = ref({})
onBeforeMount(async () => {
  let res = await _this.$api.base.GetBaseInfo(route.params.id)
  detail.value = res.data
  detail.value.openDateText = detail.value.open_date
    .map((item) => weekDay[item])
    .join('、')
})
//取消预约
const cancelApply = () => {}
</script>

<style scoped lang="scss">
.main {
  margin-top: -0.666667rem;
  border-radius: 0.426667rem 0.426667rem 0px 0px;
}
.litter-line {
  height: 0.266667rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.content {
  padding: 0.266667rem 0.6rem;
  background: #f9fbfe;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.bottom_fixed {
  @include bottom_fixed;
}
</style>
